<script setup name="worksAdd">
import {  ref } from "vue";
import { useMyStore } from "../../store/index";
import { Upload } from "@/utils/index";
const props = defineProps(["showPageDeatil", "currentIndex", "closeEditing"]);

const pageIndex = useMyStore().pageIndex;
const item = useMyStore().customArtwork.pageContent[pageIndex];
const currentEffectIndex = ref(0);

const clickEffectText = ["原声释放", "关闭声音"];

const chageUploadVideo = async (file) => {
  console.log(file);
  let urlData = await Upload("video", file);
  item[props.currentIndex].url = urlData.url;
};

const selectClickEffect = (index) => {
  currentEffectIndex.value = index;
  if (index == 1) {
    item[props.currentIndex].isSound = true;
    return;
  }
  item[props.currentIndex].isSound = false;
};
const deleteVideoItem = () => {
  item.splice(props.currentIndex, 1);
  props.closeEditing();
};
</script>
<template>
  <van-action-sheet :overlay="false" v-model:show="props.showPageDeatil">
    <div class="bottom-sheet">
      <div class="material-name" style="border: 1px solid #ff6464">
        <span>视频名称</span>
        <van-field placeholder="请输入素材名称" v-model="item.worksName" />
      </div>
      <div class="click-effect">
        <div class="click-item">
          <span>声音设置</span>
          <div class="click-right">
            <div
              v-for="(item, index) in clickEffectText"
              :key="index"
              :class="currentEffectIndex == index ? 'active-lig' : ''"
              @click="selectClickEffect(index)"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="material-name no-transparency">
        <span>声音音量</span>
        <div class="slider">
          <van-slider
            max="1"
            min="0"
            step="0.01"
            v-model="item[props.currentIndex].volume"
            active-color="linear-gradient(90deg, #dffabc 0%, #87f4df 100%)"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
        </div>
      </div>

      <div class="btn-bottom van-hairline--top">
        <div @click="deleteVideoItem">删除</div>
        <div @click="props.closeEditing">保存</div>
      </div>
    </div>
  </van-action-sheet>
</template>

<style lang="less" scoped>
.dialog-warp {
  display: flex;
  flex-direction: column;
  padding: 0 30px;
  span {
    margin-top: 42px;
    font-size: 26px;
    color: #333333;
  }
  .dialog-content {
    margin-top: 24px;
    width: 521px;
    background: #f8f8f8;
    border-radius: 16px;
    padding: 0 22px 0 20px;
    :deep(.van-cell) {
      background-color: #f8f8f8 !important;
    }
    .van-radio {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-between;
    }
  }
  .dialog-btn-bottom {
    display: flex;
    margin-top: 21px;
    margin-bottom: 30px;
    div:nth-child(1) {
      flex: 1;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 60%);
      border-radius: 16px;
      opacity: 0.5;
      border: 1px solid #87f4df;
      font-size: 28px;
      color: #49cb96;
      margin-right: 24px;
    }
    div:nth-child(2) {
      flex: 1;
      height: 70px;
      text-align: center;
      line-height: 70px;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      border-radius: 16px;
      font-size: 28px;
      color: #000000;
    }
  }
}

.active-lig {
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%) !important;
}
.image-container {
  width: 100%;
  height: 500px;
  position: relative;
}
.custom-button {
  width: 34px;
  height: 34px;
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
  border: 1px solid #ffffff;
  border-radius: 50%;
}
:deep(.van-cell__title) {
  display: flex;
  align-items: center;
  .GHmoban {
    width: 22px;
    height: 22px;
    margin-right: 10px;
  }
}

.setUp {
  width: 506px;
  height: 60px;
  margin-top: 22px;
  box-sizing: border-box;
  padding: 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  div {
    display: flex;
    align-items: center;
  }
  .edit-img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
  .border-img {
    width: 1px;
    height: 28px;
    margin-right: 12px;
  }
}

.bottom-sheet {
  padding: 0 28px;
  :deep(.van-uploader) {
    width: 100%;
    .van-uploader__input-wrapper {
      width: 100%;
    }
  }
  .material-name {
    margin-top: 22px;
    font-size: 26px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    background: #ffffff;
    border-radius: 16px;

    :deep(.van-slider, ) {
      width: 201px;
    }
    :deep(.van-field) {
      padding: 0;
      width: 255px;
    }
    .slider {
      display: flex;
      align-items: center;
    }
  }
  .no-transparency {
    background-color: #f8f8f8;
  }
  .click-effect {
    margin-top: 22px;
    font-size: 26px;
    padding: 27px 20px 16px;
    background: #f8f8f8;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    .click-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .click-right {
        display: flex;
        div {
          width: 156px;
          height: 60px;
          background: #ededed;
          border-radius: 16px;
        }
        div:nth-child(1) {
          width: 156px;
          height: 60px;
          background: #ededed;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        > div:nth-child(2),
        div:nth-child(3) {
          width: 156px;
          height: 60px;
          margin-left: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 16px;
          font-size: 26px;
          color: #333333;
        }
      }
    }
  }

  .btn-bottom {
    height: 223px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-top: 30px;
    div {
      width: 335px;
      height: 90px;
      font-size: 28px;
      border-radius: 16px;
      text-align: center;
      line-height: 90px;
    }
    div:first-child {
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      border-radius: 16px;
      border: 1px solid #87f4df;
      font-size: 28px;
      color: #49cb96;
      opacity: 0.6;
    }
    div:nth-child(2) {
      border-radius: 16px;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      font-size: 28px;
      color: #000000;
    }
  }
}
</style>
